<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head lang="en">
    <meta charset="UTF-8">
    <title>商品管理系统首页</title>
    <link type="text/css" rel="stylesheet" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css"  th:href="@{/css/index.css}"/>
    <link rel="stylesheet"type="text/css"  th:href="@{/css/animate.css}"/>


</head>

<body>
<input name="rootUrl" id="rootUrl"  style="display:none;" th:value="${#request.contextPath}">
<!--图像搜索模态框-->
<div class="modal fade" id="imageOcr" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" >
                    图像搜索
                </h4>
            </div>
            <div class="modal-body">
                <!--图像搜索的form表单-->
                <form  class="form-horizontal" method="post" >
                    <div class="form-group has-feedback">
                        <label for="name" class="col-sm-2 control-label">上传图片</label>
                        <div class="col-sm-5">
                            <input type="file" class="form-control" accept="image/gif,image/jpeg,image/png,image/jpg" id="upload" >
                            <!--<span class="glyphicon glyphicon-user form-control-feedback"></span>-->
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="button" class="btn btn-primary" data-dismiss="modal" value="识别图片" onclick="getTextByImage()">
                    </div>
                </form>
                <!--form结束-->
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>
<!--图像搜索模态框结束-->
<!--导航部分  begin-->
<div class="container" style="margin-top: 5px;">
    <nav class="navbar navbar-default well-sm" style="padding-left: 0px;" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" th:href="${#request.getContextPath()}+'/index'">商品管理系统</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav pull-left">
                    <li class="active">
                        <a th:href="${#request.getContextPath()}+'/index'">首页</a>
                    </li>



                    <li>
                        <a href="#" data-toggle="modal" data-target="#insertCommodity">添加商品</a>
                    </li>
                    <li>
                        <a th:href="${#request.getContextPath()}+'/userlist'" >管理用户</a>
                    </li>
                    <li>
                        <a th:href="${#request.getContextPath()}+'/logout'" >退出登陆</a>
                    </li>
                </ul>
                <form th:action="${#request.getContextPath()}+'/search'">
                <div class="input-group col-md-3 pull-right" style="positon:relative;padding: 7px;">

                    <input id="search" name="searchwords" type="text" class="form-control" placeholder="请输入物品名"/>
                    <span class="input-group-btn">
					            <button id="button" type="submit" class="btn btn-info btn-search" >
					            	<span class="glyphicon glyphicon-search"></span>
					            </button>
							</span>
                    <span class="input-group-btn">
					            <button type="button" class="btn btn-info" data-toggle="modal"
                                        data-target="#imageOcr">
					            	<span class="glyphicon glyphicon-camera"></span>
					            </button>
                    </span>

                </div>
                </form>

            </div>
        </div>
    </nav>
</div>
<!--导航部分 end-->



<!--最顶端轮播图片 begin-->
<div id="gcarouse" class="container">
    <!--轮播-->
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <a href="details.html"><img th:src="@{/images/timg9.jpg}" class="pull-left" alt="First slide"></a>

            </div>
            <div class="item">
                <a href="details.html"><img th:src="@{/images/timg9.jpg}" class="pull-left" alt="First slide"></a>

            </div>
            <div class="item">
                <a href="details.html"><img th:src="@{/images/timg9.jpg}" class="pull-left" alt="First slide"></a>

            </div>
        </div>

        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>
<!--最顶端轮播图片 end-->



<!--图书内容部分 begin-->
<div class="container">
    <!--商品展示 begin-->
    <div>
        <div class="text-primary">
            <!-- <img th:src="${#request.getContextPath()}+'/file/image/IMG_0033.JPG'" alt="" title="">-->
            <a href="#">商品展示</a>
        </div>
        <div id="selected">
            <div>
                <div class="container">
                    <div class="row">

                        <div class=" col-sm-6 col-md-3 " th:each="commodity:${result}">
                            <div class="thumbnail">
                                <a th:href="${#request.getContextPath()}+'/selectOne/'+${commodity.number}">
                                    <img th:src="${#request.getContextPath()}+${commodity.imageAddress}" >
                                </a>
                                <div class="caption">
                                    <h3 th:text="${commodity.name}"></h3>
                                    <p>类型:<span th:text="${commodity.type}"></span></p>
                                    <p>价格:<span th:text="${commodity.price}"></span> 元</p>
                                    <p>数量:<span th:text="${commodity.quantity}"></span></p>
                                    <p>
                                        <a th:href="${#request.getContextPath()}+'/selectOne/'+${commodity.number}">
                                            更多信息
                                        </a>
                                    </p>
                                    <p>
                                        <a th:href="${#request.getContextPath()}+'/delete/'+${commodity.number}">
                                            删除
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>





                    </div>
                </div>

            </div>



        </div>
        <ul id="pageLimit" class="pagination" ></ul>
        <input type="hidden"  id="pageNum" name="pageNum" th:value="${pageInfo.pageNum}" />
        <input type="hidden" id="pages" name="pages" th:value="${pageInfo.pages}" />
    </div>

    <!--商品展示 end-->




    <!-- 添加商品-->
    <!-- 添加商品-->

    <!--添加商品模态框结束-->


<!--添加商品模态框结束-->
</div>
<div class="modal fade" id="insertCommodity"   aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel3">
                    添加商品
                </h4>
            </div>
            <div class="modal-body">
                <!--添加商品的form表单-->
                <form action="insert" class="form-horizontal" method="post" id="addCommodityForm" novalidate>

                    <div class="form-group has-feedback">
                        <label for="name" class="col-sm-2 control-label">上传图片</label>
                        <div class="col-sm-5">
                            <input type="file" class="form-control" accept="image/gif,image/jpeg,image/png,image/jpg" id="uploadCommodity" >
                            <!--<span class="glyphicon glyphicon-user form-control-feedback"></span>-->
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="name" class="col-sm-2 control-label">商品名</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="name" name="name">
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                        </div>

                    </div>
                    <div class="form-group has-feedback">
                        <label for="type" class="col-sm-2 control-label">类型</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="type" name="type">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        </div>

                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label">价格</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="price" name="price">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label">数量</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="quantity" name="quantity">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        </div>
                    </div>

                    <!--<input style="display:none;" type="text" class="form-control" id="imageStr" name="imageStr">
                    <input style="display:none;" type="text" class="form-control" id="imageName" name="imageName">-->

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="button" class="btn btn-primary" value="提交" onclick="addCommodity()">
                    </div>
                </form>
                <!--form结束-->
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>


<script th:src="@{/dist/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/js/carousel.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/dist/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/js/bootstrap-paginator.min.js}"></script>
<script th:src="@{/js/wow.js}"></script>
<script th:src="@{/js/indexScript.js}" type="text/javascript"></script>
<script th:src="@{/js/commodityData.js}"type="text/javascript" ></script>
<script type="text/javascript">
    var contextPath =$("#rootUrl").val();
    /**
     * 异步加载首页数据页
     */


    $('#pageLimit').bootstrapPaginator({
        currentPage: $("#pageNum").val(),
        totalPages: $("#pages").val(),
        size: "normal",
        bootstrapMajorVersion: 3,
        alignment: "right",
        numberOfPages: 4,
        itemTexts: function (type, page, current) {
            switch (type) {
                case "first": return "首页";
                case "prev": return "上一页";
                case "next": return "下一页";
                case "last": return "末页";
                case "page": return page;
            }
        },
        onPageClicked: function (event, originalEvent, type, page){//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
            window.location.href =contextPath+ "/listorsearch2?pageNum=" + page;
        }
    });
</script>

</body>

</html>